<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../common/header.ftl">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=j09GQBURkfAifzXdb1MZP8KgbQDVxmPw"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <style type="text/css">
        body, html, #allMap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        .showPanel {
            position: absolute;
            top: 20px;
            right: 20px;
            bottom: 20px;
            width: 480px;
            background-color: white;
            box-shadow: 0 0 20px 0 #dadada;
            border-radius: 10px;
        }

        .showPanel .title {
            border-bottom: 1px solid #f3f3f3;
            color: #252f32;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 15px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        .showPanel .content {
            padding: 10px;
            position: absolute;
            top: 44px;
            left: 0;
            right: 0;
            bottom: 10px;
            overflow-y: auto;
        }

        .time-line li {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<input id="exOrderId" type="hidden" value="${exOrderNo}">
<input id="token" type="hidden" value="${token}">
<div id="allMap"></div>
<div id="showPanel" class="showPanel" style="display:none;">
    <div class="title">运输详情
        <small>[<span data-field="no">-</span>]
            <span style="float:right;"><a href="javascript:hiddenPanel()">关闭</a></span>
        </small>
    </div>
    <div class="content">
        <h4><b>托运方信息</b></h4>
        <div class="details-panel">
            <div class="item">
                <span class="field">联系人</span>
                <span class="value" data-field="shipper.name">-</span>
            </div>

            <div class="item">
                <span class="field">联系电话</span>
                <span class="value" data-field="shipper.tel">-</span>
            </div>
            <div class="item">
                <span class="field">所在地区</span>
                <span class="value" data-field="shipper.zone">-</span>
            </div>
            <div class="item">
                <span class="field">装货地点</span>
                <span class="value" data-field="shipper.address">-</span>
            </div>
        </div>

        <h4><b>收货方信息</b></h4>
        <div class="details-panel">
            <div class="item">
                <span class="field">联系人</span>
                <span class="value" data-field="receiver.name">-</span>
            </div>

            <div class="item">
                <span class="field">联系电话</span>
                <span class="value" data-field="receiver.tel">-</span>
            </div>
            <div class="item">
                <span class="field">所在地区</span>
                <span class="value" data-field="receiver.zone">-</span>
            </div>
            <div class="item">
                <span class="field">装货地点</span>
                <span class="value" data-field="receiver.address">-</span>
            </div>
        </div>

        <h4><b>货物详情</b></h4>
        <div class="details-panel">
            <div class="item">
                <span class="field">承运要求</span>
                <span class="value" data-field="claim">-</span>
            </div>

            <div class="item">
                <span class="field">装车重量</span>
                <span class="value"><i data-field="weight"></i> 吨</span>
            </div>

            <div class="item">
                <table id="goodsTable"></table>
            </div>
        </div>

        <h4><b>项目进度</b></h4>
        <div class="details-panel">
            <div class="item">
                <ul class="time-line" id="logList"></ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var map, exOrderNo, token, goodsTable, pointList;
    $(document).ready(function () {
        initMap();
        pointList = [];
        exOrderNo = $('#exOrderId').val();
        token = $('#token').val();
        var showPanel = $('#showPanel');

        showLoading();
        $.ajax({
            type: 'get',
            url: API_EXT_API + "/waybill/" + exOrderNo,
            dataType: "json",
            contentType: 'application/json',
            headers: {
                access_token: token
            },
            success: function (data) {
                console.info(data);
                $(data.obj).each(function () {
                    var item = this;
                    var carNumber = item.carAndDriverList[0].carNumber;
                    $.get(API_EXT_API + "/location", {
                        carNumber: carNumber
                    }, function (resp) {
                        if (resp.code === "SUCCESS") {
                            var point = new BMap.Point(resp.obj.lat, resp.obj.lon);
                            var marker = new BMap.Marker(point);
                            marker.carNumber = carNumber;
                            marker.waybillNo = item.no;
                            marker.waybill = item;

                            var label = new BMap.Label(carNumber, {offset: new BMap.Size(20, -10)});
                            marker.setLabel(label);

                            marker.addEventListener("click", function () {
                                fullField(this.waybill);
                                goodsTable = $('#goodsTable');
                                goodsTable.bootstrapTable({
                                    data: this.waybill.goodsList,
                                    pagination: false,
                                    columns: [
                                        {field: 'id', title: 'ID', visible: false},
                                        {field: 'displayName', title: '品名'},
                                        {field: 'quantity', title: '数量/件', width: 100, align: 'center'},
                                        {field: 'weights', title: '重量/kg', width: 100, align: 'center'}
                                    ]
                                });

                                var logs = this.waybill.logs;
                                $('#logList').empty();
                                for (var i = 0; i < logs.length; i++) {
                                    var item = logs[i];
                                    var $li = $('<li></li>');
                                    var $i = $('<i class="glyphicon glyphicon-time"></i>');
                                    if (i === 0) {
                                        $i.addClass('new');
                                    }
                                    var $span = $('<span></span>');
                                    $span.text(new Date(item.eventDate).format('yyyy-MM-dd hh:mm:ss'));
                                    $li.append($i);
                                    $li.append($span);
                                    $li.append(' ' + item.content);
                                    $('#logList').append($li);
                                }

                                if (showPanel.is(':hidden')) {
                                    showPanel.fadeIn(500);
                                } else {
                                    showPanel.fadeOut(250);
                                    showPanel.fadeIn(250);
                                }

                            });
                            map.addOverlay(marker);
                            pointList.push(point);
                        }
                        map.setViewport(pointList);
                    });
                });

                /*goodsTable = $('#goodsTable');
                goodsTable.bootstrapTable({
                    data: data.obj[0].goodsList,
                    pagination: false,
                    columns: [
                        {field: 'id', title: 'ID', visible: false},
                        {field: 'displayName', title: '品名'},
                        {field: 'quantity', title: '数量/件', width: 100, align: 'center'},
                        {field: 'weights', title: '重量/kg', width: 100, align: 'center'}
                    ]
                });

                var logs = data.obj[0].logs;
                for (var i = 0; i < logs.length; i++) {
                    var item = logs[i];
                    var $li = $('<li></li>');
                    var $i = $('<i class="glyphicon glyphicon-time"></i>');
                    if (i === 0) {
                        $i.addClass('new');
                    }
                    var $span = $('<span></span>');
                    $span.text(new Date(item.eventDate).format('yyyy-MM-dd hh:mm:ss'));
                    $li.append($i);
                    $li.append($span);
                    $li.append(' ' + item.content);
                    $('#logList').append($li);
                }*/
            },
            error: function (jqXHR) {
                bootbox.alert(jqXHR.responseJSON.message);
            },
            complete: function () {
                loadingDialog.modal("hide");
            }
        });


    });

    function initMap() {
        // 百度地图API功能
        map = new BMap.Map("allMap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapStyle({style: 'grayscale'});
        // 添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        });
        map.addControl(navigationControl);
    }

    function hiddenPanel() {
        $("#showPanel").fadeOut(500);
    }


</script>
